---
title: "盒阴影"
# description: "Utilities for controlling the box shadow of an element."
description: "用于控制元素的盒状阴影的功能类。"
features:
  responsive: true
  customizable: true
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/boxShadow'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Outer shadow（外阴影）

<!-- Use the `.shadow-sm`, `.shadow`, `.shadow-md`, `.shadow-lg`, `.shadow-xl`, or `.shadow-2xl` utilities to apply different sized outer box shadows to an element. -->
使用 `.shadow-sm`, `.shadow`, `.shadow-md`, `.shadow-lg`, `.shadow-xl`, 或 `.shadow-2xl` 等功能类来应用不同大小的外框阴影到一个元素上。

```html indigo
<template preview>
  <div class="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4">
    <div class="shadow-sm h-32 w-32 font-medium bg-white rounded-md flex items-center justify-center">.shadow-sm</div>
    <div class="shadow h-32 w-32 font-medium bg-white rounded-md flex items-center justify-center">.shadow</div>
    <div class="shadow-md h-32 w-32 font-medium bg-white rounded-md flex items-center justify-center">.shadow-md</div>
    <div class="shadow-lg h-32 w-32 font-medium bg-white rounded-md flex items-center justify-center">.shadow-lg</div>
    <div class="shadow-xl h-32 w-32 font-medium bg-white rounded-md flex items-center justify-center">.shadow-xl</div>
    <div class="shadow-2xl h-32 w-32 font-medium bg-white rounded-md flex items-center justify-center">.shadow-2xl</div>
  </div>
</template>

<div class="**shadow-sm** ..."></div>
<div class="**shadow** ..."></div>
<div class="**shadow-md** ..."></div>
<div class="**shadow-lg** ..."></div>
<div class="**shadow-xl** ..."></div>
<div class="**shadow-2xl** ..."></div>
```

## Inner shadow （内阴影）

<!-- Use the `shadow-inner` utility to apply a subtle inset box shadow to an element. This can be useful for things like form controls or wells. -->
使用 `shadow-inner` 功能类为元素应用一个微妙的插入框阴影。这对表单控件或井等元素很有用。

```html purple
<template preview>
  <div class="flex justify-center items-center">
    <div class="shadow-inner h-24 w-40 font-medium bg-purple-200  text-purple-500 rounded-md flex items-center justify-center">.shadow-inner</div>
  </div>
</template>

<div class="**shadow-inner** ..."></div>
```

## No shadow（无阴影）

<!-- Use `shadow-none` to remove an existing box shadow from an element. This is most commonly used to remove a shadow that was applied at a smaller breakpoint. -->
使用 `shadow-none` 从元素中移除现有的盒状阴影。这最常见的是用来移除应用在较小断点上的阴影。

```html rose
<template preview>
  <div class="flex justify-center items-center">
    <div class="shadow-none h-24 w-40 font-medium bg-rose-200 text-rose-500 rounded-md flex items-center justify-center">.shadow-none</div>
  </div>
</template>

<div class="**shadow-none** ..."></div>
```

<!-- ## Responsive -->
## 响应式

<!-- To control the shadow of an element at a specific breakpoint, add a `{screen}:` prefix to any existing shadow utility. For example, use `md:shadow-lg` to apply the `shadow-lg` utility at only medium screen sizes and above. -->
要在特定的断点处控制元素的阴影，请在任何现有的阴影功能中添加 `{screen}:` 前缀。例如，使用 `md:shadow-lg` 来应用 `shadow-lg` 功能在中等大小的屏幕和更大的屏幕上。

```html
<div class="shadow **md:shadow-lg** ...">
  <!-- ... -->
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看[响应式设计](/docs/responsive-design)文档。

<!-- ## Customizing -->
## 自定义

### Box Shadows

<!-- By default Tailwind provides three drop shadow utilities, one inner shadow utility, and a utility for removing existing shadows. You can change, add, or remove these by editing the `theme.boxShadow` section of your Tailwind config. -->

<!-- If a `default` shadow is provided, it will be used for the non-suffixed `.shadow` utility. Any other keys will be used as suffixes, for example the key `'2'` will create a corresponding `.shadow-2` utility. -->
默认情况下，Tailwind 提供了三个 drop shadow 功能，一个内部阴影功能，和一个删除现有阴影的功能。您可以通过编辑您的 Tailwind 配置中的 `theme.boxShadow` 部分来改变，添加或删除这些功能。

如果提供了一个 `default` 阴影，它将被用于非后缀的 `.shadow` 功能。任何其他键将被用作后缀，例如键 `'2'` 将创建一个相应的 `.shadow-2` 功能。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      boxShadow: {
        sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
        DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
        md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
        lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
        xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
        '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+       '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
        inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
-       outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
+       focus: '0 0 0 3px rgba(66, 153, 225, 0.5)',
        none: 'none',
      }
    }
  }
```

<!-- ### Variants -->
### 变体

<Variants plugin="boxShadow" />

<!-- ### Disabling -->
### 禁用

<Disabling plugin="boxShadow" />
